<template>
  <div>
    <van-button type="primary"
                size="mini"
                @click="pop">左侧弹出</van-button>

    <van-button type="primary"
                size="mini"
                @click="bottom">底部菜单</van-button>
    <van-popup v-model="show"
               position="laft">
      <van-tree-select :items="items"
                       :active-id.sync="activeId"
                       @click-item='handleClick'
                       :main-active-index.sync="activeIndex" />
    </van-popup>
    <van-action-sheet v-model="isShow"
                      :actions="actions"
                      @select="onSelect" />
  </div>
</template>
<script>
import { Popup, Button, TreeSelect, Toast, ActionSheet } from 'vant';
export default {
  name: 'Address',
  components: {
    [Popup.name]: Popup,
    [Button.name]: Button,
    [TreeSelect.name]: TreeSelect,
    [ActionSheet.name]: ActionSheet
  },
  data () {
    return {
      isShow: false,
      show: false,
      items: [
        {
          text: '陕西',
          info: 3,
          children: [
            {
              text: '温州',
              id: 1,
            },
            {
              text: '杭州',
              id: 2
            },
            {
              text: '杭州',
              id: 3
            },
            {
              text: '杭州',
              id: 4
            },
            {
              text: '杭州',
              id: 5
            }
          ]
        },
        {
          text: '陕西',
          info: 3,
          children: [
            {
              text: '温州',
              id: 1,
            },
            {
              text: '杭州',
              id: 2
            },
            {
              text: '杭州',
              id: 3
            },
            {
              text: '杭州',
              id: 4
            },
            {
              text: '杭州',
              id: 5
            }
          ]
        },
        {
          text: '陕西',
          info: 3,
          children: [
            {
              text: '温州',
              id: 1,
            },
            {
              text: '杭州',
              id: 2
            },
            {
              text: '杭州',
              id: 3
            },
            {
              text: '杭州',
              id: 4
            },
            {
              text: '杭州',
              id: 5
            }
          ]
        }
      ],
      actions: [
        { name: '选项' },
        { name: '选项' },
        { name: '选项', subname: '描述信息' }
      ],
      activeId: 1,
      activeIndex: 0
    }
  },
  methods: {
    pop () {
      this.show = true
    },
    handleClick (item) {
      // eslint-disable-next-line no-console
      console.log(item)
      Toast(item.text)
    },
    bottom () {
      this.isShow = true
    },
    onSelect (item) {
      // eslint-disable-next-line no-console
      console.log(item)
    }
  }
}
</script>